<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            // 事件冒泡：当一个元素上的事件被发出的时候，事件从事件源来时，往上冒泡直到页面的根元素
            // 这个过程就是事件冒泡
            // 特点：先触发子级元素的事件，再触发父级元素的事件
            window.onload = function () {
                var mydiv = document.getElementById("mydiv");
                var myp = document.getElementById("myp");
                mydiv.onclick = function () {
                    alert(444);
                };
                myp.onclick = function (e) {

                    alert(555);
                    // e.stopPropagation();//阻止事件冒泡


                    // cancelBubble:设置事件是否应该不向上层进行传播
                    // true:不向上传播，即:阻止事件冒泡
                    // false:默认值，向上传播，存在事件冒泡
                    // e.cancelBubble=true;

                };
            };
        </script>
    </head>
    <body>
        <div onclick="alert(333)">
            <p onclick="alert(222)">
                <span onclick="alert(111)">itany</span>
            </p>
        </div>

        <div id="mydiv">
            <p id="myp">我是p</p>
        </div>
    </body>
</html>